<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>3-6 特殊写法 </title>
	</head>


	<!--
	 
	3.5  其他属性
	flex-bsis  设置弹性盒子 伸缩基准 
	flex-grow  设置弹性盒子的扩展比率
	flex-shrink  设置弹性盒子的缩小比率 
	
	
	3.6  
	flex: auto 
	
	
	flex :  flex-grow  flex-shrink flex-bsis 
		

	 -->

	<style>
		/* #frnak {
			flex: auto;

		} */


		* {
			margin: 0;
			padding: 0;
			box-sizing: content-box;
		}

		.container {
			color: red;
			font-size: 25px;
			width: 400px;
			height: 500px;

			/* 父元素 flex 布局 */
			display: flex;
			flex-direction: row;
			background-color: pink;
		}

		.container div {
			width: 100px;
			height: 200px;
			background-color: lightyellow;
			
			/* 1 1 0% */
			/* flex:1; */
			
			/* 1 1 150px 此时会自动缩小和扩大 */
			/* flex: 150px; */

			/* flex: 1 1 0% */
			/* flex: 1; */

			/*  0 0 auto  */
			/* flex: none; */

			/*  1 1 auto */
			/* flex :auto; */

			/* 1 1 auto  会自动扩大，缩小， 平均铺满 父容器 */
			/* flex: 1 1  auto; */

			/* 0 0 auto => 这里就是以 width 为准 */
			/* flex : 0 0 auto; */

		}

		/* 
		 flex: 1 1 xxx,
		 会自动扩大或者缩小的，
		 
		 */
	</style>

	<!-- 
	 
	
	 -->

	<body>

		<div class="container">

			<div>1</div>
			<div>2</div>
			<!-- <div>3</div> -->
			<!-- <div>4</div> -->


		</div>

	</body>
</html>
